<template>
	<view>
		<view class="welcome" v-show="step === 0">
			<view>{{userInfo.username}}同学你好，<br/>欢迎来到校园美食点评。</view>
			<view>为了更好地向你提供服务，<br/>下面我们会收集你的一部分信息。</view>
			<image src="@/static/step/蛋糕03.png"></image>
		</view>
		<view class="gender" v-show="step === 1">
			<view class="title-text">请选择你的性别</view>
			<view class="choose-wrap">
				<view >
					<image @click="changeGender(0)" class="genderItem" src="@/static/step/男.svg"></image>
				</view>
				<view >
					<image @click="changeGender(1)" class="genderItem" src="@/static/step/女.svg"></image>
				</view>
			</view>
			<view class="gendertext" :class="[{'pink':userDetail.gender===1}]">
				{{userDetail.gender === 0 ? '我是男生': '我是女生'}}
			</view>
		</view>
		<!-- <view class="birth-date" v-show="step === 2">
			<view class="title-text">请选择你的出生日期</view>
			<picker-view v-if="visible" :indicator-style="indicatorStyle" :value="value" @change="bindChange">
				<picker-view-column>
			        <view class="item" v-for="(item,index) in years" :key="index">{{item}}年</view>
			    </picker-view-column>
			    <picker-view-column>
			        <view class="item" v-for="(item,index) in months" :key="index">{{item}}月</view>
			    </picker-view-column>
			    <picker-view-column>
			        <view class="item" v-for="(item,index) in days" :key="index">{{item}}日</view>
			    </picker-view-column>
			</picker-view>
		</view> -->
		<view class="school" v-show="step === 2">
			<view class="title-text">请选择你的学校</view>
			<picker
				mode="multiSelector" @columnchange="schoolColumnChange"
				:value="multiIndex" :range="multiArray" range-key="name" @change="changeSchool"
			>
				<input :disabled="true" placeholder="点击选择你的学校" v-model="multiArray[2][multiIndex[2]].name"/>
			</picker>
		</view>
		<view class="taste" v-show="step === 3">
			<view class="title-text">请选择您的食物偏好~</view>
			<!-- <view class="tags-pool" > -->
				<!-- <view v-for="(item,index) in tasteTags" class="tag-view" :key="index">
					<uni-tag :inverted="item.inverted" :text="item.text" :type="item.type" @click="tagsClick(index)"/>
				</view> -->
				<!-- <swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
					<swiper-item>
						<view v-for="(item,index) in tasteTags.slice(0,10)" class="tag-view">{{item.text}}</view>
					</swiper-item>
					<swiper-item>
						<view v-for="(item,index) in tasteTags.slice(10,20)" class="tag-view">{{item.text}}</view>
					</swiper-item>
					<swiper-item>
						<view v-for="(item,index) in tasteTags(20,30)" class="tag-view">{{item.text}}</view>
					</swiper-item>
				</swiper> -->
			<!-- </view> -->
			<view class="uni-margin-wrap">
				<swiper class="swiper" circular :indicator-dots="true" :current="current">
					<swiper-item v-for="(count, i) in swiperList.slice(1)" :key="i">
						<view class="tags-pool" >
							<view v-for="(item,index) in tasteTags.slice(swiperList[i],count)" @click="tagsClick(index+swiperList[i])"
							class="tag-view" :class="[{'tag-view-active': !item.inverted}]">
								{{item.text}}
							</view>
						</view>
					</swiper-item>
				</swiper>
			</view>
			<view class="add-tag">
				<input placeholder="我还喜欢······" v-model="tag"/>
				<view class="plus" @click="addTag">+</view>
			</view>
		</view>
		<view class="touxiang" v-show="step === 4">
			<view class="title-text">点击上传头像</view>
			<view class="img-get" @tap="chooseImage">
				<image  :src="userDetail.icon?userDetail.icon: userInfo.icon" :data-src="userDetail.icon" mode="widthFix"></image>
			</view>
		</view>
		<view class="guide-desc" v-show="step === 5">
			<view class="title-text">介绍一下自己<br/>让大家更好地认识你吧</view>
			<textarea v-model="userDetail.description" placeholder="我就是我,不一样的烟火~"></textarea>
		</view>
		<view class="last-step" v-show="step === 6">
			<image src="@/static/step/2个冰淇淋.svg"></image>
			<button class="homeButton" @click="submitUserDetail">开启美食探寻之旅</button>
		</view>
		<view class="footer">
			<button class="prevButton" v-show="step !== 0" @click="prevStep">上一步</button>
			<button class="nextButton" v-show="step !== 6" @click="nextStep">下一步</button>
		</view>
	</view>
</template>

<script>
	import {uniTag, uniSection} from '@dcloudio/uni-ui'
	import {updateUserInfo, getSchoolTree} from '../../api/user.js'
	import {mapState, mapMutations, mapActions} from 'vuex'
	export default {
	  name: 'guide',
	  components: {
		uniTag, uniSection,
	  },
	  data(){
		const date = new Date()
		const years = []
		const months = []
		const days = []
		const year = date.getFullYear()
		const month = date.getMonth() + 1
		const day = date.getDate()
		for (let i = date.getFullYear()-150; i <= date.getFullYear(); i++) {
		    years.push(i)
		}
		for(let i = 1; i <= month; i ++){ months.push(i) }
		for(let i = 1; i <= day; i ++){ days.push(i) }
		return {
			current: 0,
		    step: 0,
		    userDetail: {
		    	gender: 0,
				icon: '',
				schoolName: '',
				schoolId: '',
				taste: new Set(),
		    },
			tag: '',
			tasteTags: [
				{text: '咸鲜', inverted: true, type: 'warning'},
				{text: '酸辣', inverted: true, type: 'warning'},
				{text: '甜辣', inverted: true, type: 'warning'},
				{text: '麻辣', inverted: true, type: 'warning'},
				{text: '三鲜', inverted: true, type: 'warning'},
				{text: '酸甜', inverted: true, type: 'warning'},
				{text: '酸甜辣', inverted: true, type: 'warning'},
				{text: '五香', inverted: true, type: 'warning'},
				{text: '煲汤', inverted: true, type: 'success'},
				{text: '拔丝', inverted: true, type: 'success'},
				{text: '蜜汁', inverted: true, type: 'success'},
				{text: '无肉不欢', inverted: true, type: 'primary'},
				{text: '素食主义', inverted: true, type: 'primary'},
				{text: '荤素搭配', inverted: true, type: 'primary'},
				{text: '海鲜', inverted: true, type: 'primary'},
				{text: '豆制品', inverted: true, type: 'primary'},
				{text: '面食', inverted: true, type: 'primary'},
				{text: '快餐食品', inverted: true, type: 'primary'},
				{text: '甜点', inverted: true, type: 'primary'},
				{text: '奶茶', inverted: true, type: 'primary'},
				{text: '粤菜', inverted: true, type: 'error'},
				{text: '鲁菜', inverted: true, type: 'error'},
				{text: '川菜', inverted: true, type: 'error'},
				{text: '苏菜', inverted: true, type: 'error'},
				{text: '闽菜', inverted: true, type: 'error'},
				{text: '湘菜', inverted: true, type: 'error'},
				{text: '浙菜', inverted: true, type: 'error'},
				{text: '徽菜', inverted: true, type: 'error'},
				{text: '牛排', inverted: true, type: 'error'},
				{text: '日料', inverted: true, type: 'error'},
				{text: '俄餐', inverted: true, type: 'error'},
				{text: '法国菜', inverted: true, type: 'error'},
				{text: '印度菜', inverted: true, type: 'error'},
				{text: '越南菜', inverted: true, type: 'error'},
				{text: '泰国菜', inverted: true, type: 'error'},
				{text: '火锅', inverted: true, type: 'error'},
			],
		    years,
			months,
			days,
			multiIndex: [-1, -1, -1],
			multiArray: [[], [], []],
		    value: [150, month - 1, day - 1],
			/**
			 * 解决动态设置indicator-style不生效的问题
			 */
		    visible: true,
		    indicatorStyle: `height: ${Math.round(uni.getSystemInfoSync().screenWidth/(750/100))}px;`
		}
	  },
	  computed:{
	  	...mapState(['hasLogin', 'userInfo', 'baseTarget', 'schoolData']),
		swiperList(){
			const total = this.tasteTags.length
			let k = total / 12
			let swiperList = [0]
			for(let i = 1; i < k; i ++){
				swiperList.push(i * 12)
			}
			if(swiperList[-1] !== total){
				swiperList.push(total)
			}
			console.log(swiperList)
			return swiperList
		},
	  },
	  onLoad(options){
		this.setSchoolData().then(data=>{
			this.multiArray = [
				data, data[0].cityVOList, data[0].cityVOList[0].schoolList,
			]
		})
	  },
	  methods:{
		...mapActions(['setSchoolData']),
		...mapMutations({
			storeLogin: 'login'
		}),
		addTag(){
			this.tasteTags.unshift({text: this.tag, inverted: false})
			this.userDetail.taste.add(this.tag)
			this.tag = null
			this.current = 0
		},
		changeSchool(e){
			console.log('change', e)
			this.multiIndex = e.detail.value
		},
		getMonths(year){
			let len = 12
			let date = new Date()
			let currentYear = date.getFullYear()
			if(year === currentYear){
				len = date.getMonth() + 1
			}
			if(this.months.length === len) return
			let months = []
			for (let i = 1; i <= len; i++) {
			    months.push(i)
			}
			this.months = months
			console.log(len)
			return len
		},
		getDays(year, month){
			let len
			let date = new Date()
			let currentYear = date.getFullYear()
			let currentMonth = date.getMonth() + 1
			if(year === currentYear && month === currentMonth){
				console.log('获取当月的day')
				len = date.getDate()
			}else{
				console.log('通过getMonth获取day', year, month)
				len =  this.getMonthDay(Number.parseInt(year), Number.parseInt(month))
			}
			if(this.days.length === len) return
			let days = []
			for (let i = 1; i <= len; i++) {
			    days.push(i)
			}
			this.days = days
			console.log(len)
			return len
		},
		tagsClick( index){
			const {taste} = this.userDetail
			const {text, inverted} = this.tasteTags[index]
			this.tasteTags[index].inverted = !inverted;
			if(taste.has(text)){
				this.userDetail.taste.delete(text)
			}else{
				this.userDetail.taste.add(text)
			}
			console.log(this.userDetail.taste)
		},
		schoolColumnChange(e){
			const {column, value} = e.detail
			this.multiIndex[column] = value
			switch(column){
				case 0:  // 选择的是第一列
					this.multiArray[1] = this.multiArray[0][value].cityVOList
					this.multiArray[2] = this.multiArray[1][0].schoolList
					this.multiIndex[1] = 0
					this.multiIndex[2] = 0
					break;
				case 1:  // 选择的是第二列
					this.multiArray[2] = this.multiArray[1][value].schoolList
					this.multiIndex[2] = 0
					break;
				default: break;
			}
			this.$forceUpdate()
		},
		getMonthDay(year, month){  // 根据年份和月份获取天数
			switch(month){
				case 1:
				case 3:
				case 5:
				case 7:
				case 8:
				case 10:
				case 12:
					return 31; break;
				case 4:
				case 6:
				case 9:
				case 11:
					return 30; break;
				case 2:
					if(year%4==0&&year%100!=0||year%400 === 0){
						return 29;
					}else{
						return 28
					}
					break;
				default:
					break;
			}
		},
		nextStep(){
			this.step ++
		},
		prevStep(){
			this.step --
		},
		submitUserDetail(){
			let date = new Date()
			if(this.multiIndex[0] === -1){
				uni.showToast({ title:'选择你的学校，发现更多精彩~', icon: 'none'}); 
				this.step = 2;
				return
			}
			if(!this.userDetail.icon){
				uni.showToast({ title:'上传一张头像，让别人更好地记住你吧~', icon: 'none'}); 
				this.step = 4;
				return;
			}
			let schoolId = this.schoolData[this.multiIndex[0]].cityVOList[this.multiIndex[1]].schoolList[this.multiIndex[2]].schoolId;
			let month = this.months[this.value[1]] ? this.months[this.value[1]] : date.getMonth()+1
			let day = this.days[this.value[2]] ? this.days[this.value[2]] : date.getDate()
			let birthday = this.years[this.value[0]] + '-' + month + '-' + day + ' 00:00:00';
			let taste = Array.from(this.userDetail.taste).join(',')
			const formData = {
					id: this.userInfo.id,
					sex: this.userDetail.gender,
					description: this.userDetail.description,
					schoolId, taste, birthday,
				}
			uni.showLoading({
			  title: '正在努力上传中...',
			  mask: true
			});
			uni.uploadFile({
				url: this.baseTarget + '/user/update',
				filePath: this.userDetail.icon,
				name: 'icon',
				formData: formData,
				success: res =>{
					if(res.data.code === 200){
						const {data} = res.data
						this.storeLogin(data)
						uni.showToast({title: '恭喜你发现了一个宝藏小程序，让我们一起愉快地玩耍吧', duration: 2000, icon: 'none'})
						setTimeout(uni.switchTab({url: '/pages/home/index'}),0)
					}else{
						uni.showToast({title: res.data.message, icon: 'none'})
					}
				},
				fail: res=>{uni.showToast({title:'我们的网络出现了一点错误，请稍候再试~', icon: 'none'})},
				complete: ()=>{uni.hideLoading()}
			})
		},
		changeGender(type){
			this.userDetail.gender = type
		},
		bindChange (e) {
			console.log(e)
		    const val = e.detail.value
			let date = new Date()
			console.log(this.value)
			console.log('年月日')
			console.log(this.years[val[0]], this.months[val[1]], this.days[val[2]])
			if(this.value[0] != val[0]){ // 修改了年份
				this.getMonths(this.years[val[0]])
				let month = this.months[val[1]] ? this.months[val[1]] : date.getMonth() + 1
				this.getDays(this.years[val[0]], month)
			}else if(this.value[1] !== val[1]){ //修改了月份
				let month = this.months[val[1]] ? this.months[val[1]] : date.getMonth() + 1
				this.getDays(this.years[val[0]], month)
			}
			this.value = val
		},
		chooseImage: async function() {
			uni.chooseImage({
				sourceType: ['album'],
				sizeType: ['compressed', 'original'],
				count: 1,
				success: (res) => {
					if(res.tempFiles[0].size > 2 * 1024 * 1000){
						uni.showToast({title: '上传的图片大小不能大于2M，请重新选择图片上传~', icon: 'none'})
						return;
					}
					this.userDetail.icon = res.tempFilePaths[0]
				},
				fail: (err) => {
					// uni.getSetting({
					// 	success: (res) => {
					// 		let authStatus = res.authSetting['scope.album'];
					// 		if (!authStatus) {
					// 			uni.showModal({
					// 				title: '授权失败',
					// 				content: '校园美食点评需要从您的相机或相册获取图片，请在设置界面打开相关权限',
					// 				success: (res) => {
					// 					if (res.confirm) {
					// 						uni.openSetting()
					// 					}
					// 				}
					// 			})
					// 		}
					// 	}
					// })
				}
			})
		},
	  }
	}
</script>

<style lang="scss">

	/* #ifdef MP-BAIDU */
	@font-face {
		font-family: uniicons;
		font-weight: normal;
		font-style: normal;
		src: url("~@/static/uni.ttf") format("truetype");
	}
	/* #endif */

	.title-text{
		text-align: center;
		font-size: 24px;
		font-weight: 500;
		margin-bottom: 30rpx;
	}

	.school{
		margin-top: 300rpx;
		input{
			border: solid 1rpx $theme-color;
			font-size: 28rpx;
			padding: 15rpx 25rpx;
			line-height: 80rpx;
			height: 80rpx;
			width: 90%;
			margin-left: 30rpx;
		}
	}

	.guide-desc{
		margin-top: 300rpx;
		textarea{
			margin: 0 20rpx;
			padding: 15rpx;
			border: 1rpx solid $theme-color;
			width: 90%;
			border-radius: 2rpx;
			line-height: 60rpx;
		}
	}

	.touxiang{
		margin-top: 300rpx;
		.img-get{
			margin-top: 30rpx;
			margin-left: 200rpx;
			border: 1rpx solid $theme-color;
			width: 304rpx;
			height: 304rpx;
			border-radius: 154rpx;
			text-align: center;
			image{
				width: 300rpx;
				height: 300rpx;
				border-radius: 150rpx;
			}
		}
	}
	.taste{
		margin-top: 200rpx;
		margin-bottom: 200rpx;
		padding: 0 30rpx;
		.uni-margin-wrap {
			// margin:0 30rpx;
			background-color: #fef8ec;
			border-radius: 20rpx;
			.swiper {
				height: 300rpx;
			}
		}
		.add-tag{
			margin-top: 20rpx;
			display: flex;
			input{
				box-sizing: border-box;
				background-color: #fff;
				padding: 0 15px;
				height: 75rpx;
				line-height: 75rpx;
				border: 1px solid $theme-color;
				margin-right: 20rpx;
				border-radius: 20rpx;
			}
			.plus{
				text-align: center;
				width: 100rpx;
				height: 75rpx;
				border-radius: 20rpx;
				line-height: 75rpx;
				font-size: 45rpx;
				color: $theme-color;
				background-color: #F1F1F1;
			}
		}
		.tags-pool{
			padding-top: 20rpx;
			display: flex;
			// flex-direction: column;
			justify-content: center;
			flex-wrap: wrap;
			.tag-view {
				margin: 10rpx 15rpx;
				padding: 0 25rpx;
				height: 50rpx;
				line-height: 50rpx;
				border-radius: 25rpx;
				background-color: #FFFFFF;
			}
			.tag-view-active {
				color: $theme-color;
				border: 1rpx solid $theme-color;
				line-height: 48rpx;
				// background-color: $theme-color;
			}
		}
		
		.example-body {
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			flex-wrap: wrap;
			padding: 20rpx;
		}
	}

	.welcome{
		margin: 0 50rpx;
		margin-top: 300rpx;
		text-align: center;
		font-size: 16px;
		image{
			margin-top: 30rpx;
		}
	}

	.last-step{
		margin-top: 200rpx;
		.homeButton{
			margin-top: 10rpx;
			background-color: $theme-color;
			color: #ffffff;
			width: 500rpx;
			&::after{
			  border: none;
			}
		}
	}

	.birth-date{
		margin-top: 30rpx;
		picker-view {
		    width: 100%;
		    height: 600rpx;
		    margin-top:20rpx;
		}
		.item {
		    line-height: 100rpx;
		    text-align: center;
		}
		.date-text{
			margin-top: 30rpx;
			text-align: center;
			font-size: 24px;
			color: $theme-color;
		}
	}

	.gender{
		margin-top: 200rpx;
		.choose-wrap{
			display: flex;
			justify-content: space-around;
		}
		.genderItem{
			width: 200rpx;
			height: 200rpx;
		}
		.gendertext{
			margin-top: 30rpx;
			text-align: center;
			color: #007AFF;
			font-size: 24px;
			font-weight: 400;
		}
		.pink{
			color: $theme-color;
		}
	}

	.footer{
		position:fixed;
		bottom: 50rpx;
		width: 750rpx;
		display: flex;
		justify-content: space-around;
		.nextButton{
			margin-top: 10rpx;
			background-color: $theme-color;
			color: #ffffff;
			width: 300rpx;
			&::after{
			  border: none;
			}
		}
		.prevButton{
			margin-top: 10rpx;
			color: $theme-color;
			width: 300rpx;
			&::after{
			  border: 1rpx solid $theme-color;
			}
		}
	}
</style>
